import { compile, h } from 'vue';
import { Avatar, Tag, Tooltip, Divider, Input } from 'ant-design-vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import RenderHtml from '/@/components/My/RenderHtml.vue';
import { ImagePreview } from '/@/components/Preview/index';

import { JumpRoute } from '/@/components/My/index';
import Icon from '/@/components/Icon';
import { getDictItemsByCode } from '/@/utils/dict/index';
import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
import { loadCategoryData } from '/@/api/common/api';
import { isEmpty } from "/@/utils/is";

const render = {
  renderInputTextArea: (props) => {
    return h(Input.TextArea, {...props})
  },
  /**
   * 渲染分割线
   */
  renderDivider: () => {
    return h(Divider)
  },

  renderDividerWithValue: (value) => {
    return h(Divider, {}, {default: () => value})
  },

  renderJumpRoute: (props) => {
    return h(JumpRoute, {...props}, {default: () => {}})
  },


  /**
   * 渲染列表头像
   */
  renderAvatar: ({ record }) => {
    if (record.avatar) {
      let avatarList = record.avatar.split(',');
      return h('span', avatarList.map((item) => {
        return h(Avatar, { src: getFileAccessHttpUrl(item), shape: 'square', size: 'default', style: { marginRight: '5px' } });
      }));
    } else {
      return h(Avatar, { shape: 'square', size: 'default', src: '/default-avatar.png' }, {
        icon: () => h(Icon, { icon: 'ant-design:file-image-outlined', size: 30 }),
      });
    }
  },
  /**
   * 根据字典编码 渲染
   * @param v 值
   * @param code 字典编码
   * @param renderTag 是否使用tag渲染
   */
  renderDict: (v, code, renderTag = false, color = '') => {
    let text = '';
    let array = getDictItemsByCode(code);
    if (array instanceof Array) {
      let obj = array.filter(item => {
        return item.value == v;
      });
      if (obj.length > 0) {
        text = obj[0].label;
      }
      return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, { color }, () => text)
    }
    return h('span', v)
  },
  /**
   * 渲染图片
   * @param text
   */
  renderImage: ({ text }) => {
    if (!text) {
      return h(Avatar, { shape: 'square', size: 'large' }, {
        icon: () => h(Icon, { icon: 'ant-design:file-image-outlined', size: 30 }),
      });
    }
    let avatarList = text.split(',');
    return h('span', avatarList.map((item) => {
      return h(Avatar, { src: getFileAccessHttpUrl(item), shape: 'square', size: 'large', style: { marginRight: '5px' } });
    }));
  },
  /**
   * 渲染 Tooltip
   * @param text
   * @param len
   */
  renderTip: (text, len = 20) => {
    if (text) {
      let showText = text + ''
      if (showText.length > len) {
        showText = showText.substr(0, len) + '...'
      }
      return h(Tooltip, { title: text }, () => showText)
    }
    return text;
  },
  /**
   * 渲染a标签
   * @param text
   */
  renderHref: ({ url, text }) => {
    if (!url) {
      return ''
    }
    const len = 20
    if (text.length > len) {
      text = text.substr(0, len)
    }
    return h('a', { href: url, target: '_blank' }, text)
  },
  /**
   * 根据字典渲染
   * @param v
   * @param array
   */
  renderDictNative: (v, array, renderTag = false) => {
    let text = '';
    let color = '';
    let obj = array.filter(item => {
      return item.value == v;
    });
    if (obj.length > 0) {
      text = obj[0].label;
      color = obj[0].color;
    }
    return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, { color }, () => text)
  },

  renderSwitch: (text, code) => {
    let array = getDictItemsByCode(code)
    return text ? filterMultiDictText(array, text) : '';
  },
  renderCategoryTree: (text, code) => {
    let array = getDictItemsByCode(code);
    return filterMultiDictText(array, text);
  },
  renderTag(text, color) {
    if (text instanceof Array ) {
      let hArray : any = []
      text.forEach(e =>  hArray.push(h(Tag, { color, style: 'margin: 2px' }, () => e)))
      return hArray.length == 0 ? h('span', text) : h('span', {}, hArray)
    } else {
      return isEmpty(text) ? h('span', text) : h(Tag, { color }, () => text)
    }
  },
  renderSpan(text) {
    return h('span', text)
  },

  renderHtml(text, props) {
    return h(RenderHtml, { text, ...props })
  },

  renderImagePreview(props) {
    return h(ImagePreview, {...props})
  }

};
export { render };
